<template>
  <div class="discord-faq">
    <h2 class="text-3xl text-gray-1000 font-semibold text-center">
      <span class="text-gray-1000 font-semibold text-34 break-words w-full">
        {{$t('discord_frequentlyAsked',{name: discordName})}}
      </span>
    </h2>
    <div class="mt-12">
      <dl class="space-y-5 divide-y divide-gray-1600 hover:divide-y">
        <div v-for="(faq, key) in faqs"
          :key="`faq-${key}`"
          class="pt-5">
          <dt class="flex items-start justify-between text-left text-xl leading-6 font-semibold text-gray-1000 hover:text-purple-1300 cursor-pointer"
            :class="{'text-purple-1300': faq.show,'opacity-90': faq.show }"
            :key="key"
            @click="show(key)">
            <span>{{$t(faq.question,{name: discordName})}}</span>
            <span class="flex justify-center h-8 ml-8 -mt-1"
              :class="{'text-purple-1300': faq.show,'text-gray-1800': !faq.show }">
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="!faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M12 6v12m6-6H6"></path>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg"
                class="h-8 w-8"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true"
                v-if="faq.show">
                <path stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M18 12H6"></path>
              </svg>
            </span>
          </dt>
          <dd class="mt-2 text-base text-gray-1000 space-y-3"
            v-if="faq.show">
            <template v-for="(item, dKey) in faq.answer">
              <p :key="dKey"
                v-if="item.type === 'text'"
                v-html="`${$t(item.value,{name: discordName, link: discord.discord})} ${item.extra && discord.premium_subscription_count ? $t(item.extra,{num: discord.premium_subscription_count}) : ''}`">
              </p>
              <p :key="dKey"
                v-else-if="item.type === 'key' && hasRealVal(discord.tool_website) && hasRealVal(discord.tool_website[item.value])">
                {{ typeof discord.tool_website[item.value] === 'string' ? discord.tool_website[item.value] : (Array.isArray(discord.tool_website[item.value]) ? discord.tool_website[item.value].join(', ') : '') }}
              </p>
              <p :key="dKey"
                v-else-if="item.type === 'link'">
                <a :href="discord[item.value]"
                  rel="nofollow"
                  target="_blank"
                  class="text-blue-1800 hover:text-blue-1400 underline">
                  {{discord[item.value]}}
                </a>
              </p>
            </template>
          </dd>
        </div>
      </dl>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'DiscordFaq',
  props: {
    discord: {
      type: Object | null,
      default() {
        return {}
      },
    },
    discordName: {
      type: String,
      default: '',
    },
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      faqs: [
        {
          question: 'discord_whatIsName',
          answer: [
            {
              type: 'key',
              value: 'what_is',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatThingsCanIDo',
          answer: [
            {
              type: 'key',
              value: 'use_cases',
            },
          ],
          show: false,
        },
        {
          question: 'discord_doesNameHave',
          answer: [
            {
              type: 'text',
              value: 'discord_yesNameHave',
            },
          ],
          show: false,
        },
        {
          question: 'discord_isNameDiscordFree',
          answer: [
            {
              type: 'text',
              value: 'discord_yesTheNameDiscord',
              extra: 'discord_butHave',
            },
          ],
          show: false,
        },
        {
          question: 'discord_howToUse',
          answer: [
            {
              type: 'key',
              value: 'how_to_use',
            },
            {
              type: 'text',
              value: 'discord_joinTheNameDiscord',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatIsTheNameDiscordBot',
          answer: [
            {
              type: 'text',
              value: 'discord_thereIsTheNameDiscordBot',
            },
            {
              type: 'link',
              value: 'discord',
            },
          ],
          show: false,
        },
        {
          question: 'discord_whatIsTheNameDiscordPrice',
          answer: [
            {
              type: 'text',
              value: 'discord_mostOfTheNameDiscords',
            },
          ],
          show: false,
        },
        {
          question: 'discord_howToGetNameDiscord',
          answer: [
            {
              type: 'text',
              value: 'discord_youCanFind',
            },
          ],
          show: false,
        },
      ],
    }
  },
  methods: {
    show(key) {
      this.faqs[key].show = !this.faqs[key].show
    },
  },
}
</script>